<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="逯灿灿">
    <title></title>
    <style>
        h3{
            margin-top: 50px;
            margin-left: 46%; 
        }
        #timer{
			width: 400px;
			margin: 100px auto;
			background-color: #333;
			padding: 5px;
			color: white;
			text-align: center;
		}
		span{
			display: inline-block;
            width: 30px;
			padding: 0 10px;
			margin: 0 10px;
			border: 2px solid #999;
			background-color: #fff;
			 color: #000; 
		}
        #button{
            width: 220px;
			margin: 0px auto; 
        }
    </style>    
</head>
<body>
    <h3>倒计时</h3>
    <div id="timer">
        <p><span id="span1">01</span>天<span id="span2">01</span>时<span id="span3">01</span>分<span id="span4">01</span>秒</p>
    </div>
    <div id="button">
        <button type="button" id="btn1">暂停倒计时</button>
        <button type="button" id="btn2">开始倒计时</button>
    </div>
    
</body>
</html>
<script type="text/javascript">
    var spans=document.querySelectorAll('span');
    var span1 = document.querySelector('#timer').querySelector('#span1').innerHTML; 
    var span2 = document.querySelector('#timer').querySelector('#span2').innerHTML; 
    var span3 = document.querySelector('#timer').querySelector('#span3').innerHTML; 
    var span4 = document.querySelector('#timer').querySelector('#span4').innerHTML; 
    var btn1 = document.querySelector('#btn1');
    var btn2 = document.querySelector('#btn2');

    var times = span1*24*3600 + span2*3600 +span3 *60 +span4*1;
	console.log(times);

	var min = 60;
    var hour = min * 60;
    var day = hour * 24;
    
    function num(n) {
        var str = '0' + (n > 0 ? n : 0);
        return str.substr(-2);
    };
	function timer(){
        var days = Math.floor(times / day);
        var hours = Math.floor(times % day / hour);
        var minutes = Math.floor(times % hour / min);
        var seconds = Math.floor(times % min);
         
        spans[0].innerHTML = num(days);
        spans[1].innerHTML = num(hours);
        spans[2].innerHTML = num(minutes);
        spans[3].innerHTML = num(seconds);

    };
    var reset = setInterval(keyer,1000);
    function keyer(){
        times -= 1;
        timer();
        if(times <= 0){
            clearInterval(reset);
        }
    }
    btn1.onclick = function(){
        clearInterval(reset);
        reset = null;
    }
    btn2.onclick = function(){
        if(reset)return;
        reset = setInterval(keyer,1000);
    }
    
</script>